﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ThanhToan2.aspx.cs" Inherits="Sbook.ThanhToan2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <style>
            *{ margin:10px auto; padding:0px}
            .box1{ background-color:Silver; float:left; width:500px; height:auto;}
            .box1 .box11{ background-color:Silver; float:left; width:100%; height:200px; }
            .box1 .box12{ background-color:White; float:left; width:100%; height:300px; display:none; border:solid 1px blue}
            .box2 .box21{background-color:Silver; float:left; width:100%; height:200px; }
            .box2 .box22{ background-color:White; float:left; width:100%; height:300px;display:none;border:solid 1px blue}
            .box2 .box22 ul{ float:left; list-style:none; width:100%}
            .box2 .box22 ul li{ float:left; width:100%; margin:5px 0px 0px 0px}
            .box2 .box22 ul li label{ float:left; width:100px; padding:0px 10px 0px 5px}
            .box2 .box22 ul li input{ margin:0px}
            .box3 .box31{background-color:Silver; float:left; width:100%; height:200px; }
            .box3 .box32{background-color:White; float:left; width:100%; height:300px;display:none;border:solid 1px blue}
            .box4 .box41{background-color:Silver; float:left; width:100%; height:200px; }
            .box4 .box42{background-color:White; float:left; width:100%; height:300px;display:none;border:solid 1px blue}
            
    </style>
    <div style=" width:510px">
            <div id="box1" class="box1">
                <div id="box11" class="box11">
                    <h1> 1.Đăng nhập</h1>
                    <strong>Thông tin đăng nhập :<%=Name %></strong>
                    <p><%=Email %></p>
                    <a href="#" id="a11">Thay doi</a>
                </div>
                <div id="box12" class="box12">
                     <h1> 1.Đăng nhập</h1>
                    <strong>Thông tin đăng nhập :<%=Name %></strong>
                    <br />
                    <label>Email :</label>
                    <input type="text"  id="txt_box12_Email"/>
                    <label>Phone :</label>
                    <input type="text" id="txt_box12_Phone" />
                    <input id="btn12" type="button" value="Tiep tuc" />
                </div>
                
            </div>
            <div id="box2" class="box2">
               
                <div id="box21" class="box21">
                      <h1> 2.Địa chỉ giao hàng</h1>
                    <strong>Địa chỉ giao hàng :<%=Name %></strong>
                    <p><%=Address %></p>
                    <a href="#" id="a21">Thay doi</a>
                </div>
                <div id="box22" class="box22">
                    <ul>
                        <li>
                            <label>Họ tên :</label>
                            <input type="text" id="txtName22" value='<%=FullNameTo %>' />
                        </li>

                       <li>
                            <label>Email :</label>
                            <input type="text" id="txtMailTo22" value='<%=MailTo %>' />
                        </li>
                        <li>
                            <label>Địa chỉ giao hàng :</label>
                            <input type="text" id="txtAddressTo22" value='<%=AddressTo %>' />
                        </li>
                        <li>
                            <label>Điện thoại :</label>
                            <input type="text" id="txtPhoneTo22" value='<%=PhoneTo %>'/>
                        </li>
                    </ul>
                    <input type="button" id="btn22" value="Tiep tuc" />
                </div>
            </div>
             <div id="box3" class="box3">
                
                <div id="box31" class="box31">
                    <h1>Box3</h1>
                    <a href="#" id="a31">Thay doi</a>
                </div>
                <div id="box32" class="box32">
                    <h1>Box3</h1>
                    <input type="button" id="btn32" value="Tiep tuc" />
                </div>
            </div>
             <div id="box4" class="box4">
               
                <div id="box41" class="box41">
                     <h1>Box4</h1>
                    <a href="#" id="a41">Thay doi</a>
                </div>
                <div id="box42" class="box42">
                     <h1>Box4</h1>
                    <input type="button" id="btn42" value="Tiep tuc" />
                </div>

            </div>
               <script type="text/javascript">
                   $(document).ready(function () {
                       $('input[type=button]#btn12').click(function () {
                           $('div#box11').css("display", "block");
                           var email = $(this).parent().children("#txt_box12_Email").val();
                           var phone = $(this).parent().children("#txt_box12_Phone").val();
                           $(this).parent().css("display", "none");
                           $.ajax({
                               type: "POST",
                               url: "XuLyThanhToan2.aspx",
                               data: { Email: email, Phone: phone }
                           }).done(function (msg) {
                               var arrR = msg.split(',');
                               $('div#box11 p').html(arrR[0]);
                           });
                           $('div#box32').css("display", "block");
                           $('div#box31').css("display", "none");
                       });
                       $('a#a11').click(function () {
                           $('div#box12').css("display", "block");
                           $(this).parent().css("display", "none");
                           $('div#box2 div#box21').css("display", "block");
                           $('div#box2 div#box22').css("display", "none");
                           $('div#box31').css("display", "block");
                           $('div#box32').css("display", "none");
                           $('div#box41').css("display", "block");
                           $('div#box42').css("display", "none");
                           var Name = $('div#box11 strong').html();
                           var Email = $(this).parent().children("p").html();
                           $('div#box12').children("#txt_box12_Email").val(Email);
                       });
                       //Go Box2
                       $('input[type=button]#btn22').click(function () {
                           $('div#box21').css("display", "block");

                           var emailto = $("#txtMailTo22").val();
                           var fullnameto = $("#txtName22").val();
                           var phoneto = $("#txtPhoneTo22").val();
                           var addressto = $("#txtAddressTo22").val();

                           $.ajax({
                               type: "POST",
                               url: "XuLyThanhToan2.aspx",
                               data: { EmailTo: emailto, FullNameTo: fullnameto, PhoneTo: phoneto, AddressTo: addressto }
                           }).done(function (msg) {
                               var arrR = msg.split(',');
                               $("div#box21 strong").html("Địa chỉ giao hàng :" + arrR[1]);
                               $("div#box21 p").html(arrR[2]);
                           });

                           $(this).parent().css("display", "none");
                           $('div#box32').css("display", "block");
                           $('div#box31').css("display", "none");

                       });
                       $('a#a21').click(function () {
                           $('div#box22').css("display", "block");
                           $(this).parent().css("display", "none");
                           $('div#box12').css("display", "none");
                           $('div#box11').css("display", "block");

                           $('div#box31').css("display", "block");
                           $('div#box32').css("display", "none");
                           $('div#box41').css("display", "block");
                           $('div#box42').css("display", "none");
                       });
                       //GoB Box3
                       $('input[type=button]#btn32').click(function () {
                           $('div#box31').css("display", "block");
                           $(this).parent().css("display", "none");
                           $('div#box42').css("display", "block");
                           $('div#box41').css("display", "none");
                           
                       });
                       $('a#a31').click(function () {
                           $('div#box32').css("display", "block");
                           $(this).parent().css("display", "none");
                           $('div#box42').css("display", "none");
                           $('div#box41').css("display", "block");
                       });
                       //Go Box4
                       $('input[type=button]#btn42').click(function () {
                           $('div#box41').css("display", "block");
                           $(this).parent().css("display", "none");
                       });
                       $('a#a41').click(function () {
                           $('div#box42').css("display", "block");
                           $(this).parent().css("display", "none");
                       });
                   });
                </script>
    </div>
    </form>
</body>
</html>
